<template>
  <h4>捐献入口</h4>
  <el-form :model="formData" label-width="80px" ref="ruleForm" label-position="left">
      <div v-for="(item,index) in formData.resources" :key="index" class="field">
        <div class="field-input">
          <el-form-item :label="`资源 ${index}`" :prop="`resources[${index}].type`" :rules="{ required: true, message: '请选择'}">
            <el-select v-model="item.type" placeholder="请选择资源">
              <el-option v-for="vo in list" :key="vo.id" :label="vo.name" :value="vo.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :prop="`resources[${index}].value`" :rules="{ required: true, message: '请输入数量', trigger: 'blur' }">
            <el-input-number v-model="item.value" :min="1"  />
          </el-form-item>
        </div>
        <div class="field-opt">
          <a href="javascript:void(0);" v-if="index !== 0 " @click="removeResource(index)"><el-icon><minus /></el-icon></a>
          <a href="javascript:void(0);" v-if="index === formData.resources.length - 1" @click="addResource"><el-icon><plus /></el-icon></a>
        </div>

      </div>
    <el-button type="primary" @click="submitForm('ruleForm')">提 交 捐 献</el-button>
  </el-form>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {GET, POST} from "../../utils/Request";
import {onMounted} from "@vue/runtime-core";
import {
  Plus,Minus
} from '@element-plus/icons'
import {Error, Success} from "../../utils/notify";
export default {
  name: "Donate",
  components:{Plus,Minus},
  setup(){
    const state = reactive({
      list : [],
      count : 0,
      formData:{
        resources:[
          {
            type:"",
            value:0
          }
        ]
      }
    })
    const methods = {
      async getGoods(){
        let resp = await GET('/donate/getResourceList')
        state.list = resp.data.data;
        state.count = resp.data.count
      },
      submitForm(formName){
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            this.donate();
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async donate(){
        let resp = await POST('/donate/submit',state.formData);
        if(resp.code === 1){
          Success(resp.msg)
          this.resetForm('ruleForm');
        }else {
          Error(resp.msg)
        }
      },
      addResource(){
        state.formData.resources.push({
          type:"",
          value: 0
        })
      },
      removeResource(i){
        if(i>0){
          state.formData.resources.splice(i,1)
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
        state.formData.resources = [
          {
            type:"",
            value:0
          }
        ]
      },
    }
    onMounted(()=>{
      methods.getGoods();
    })
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>
.field{
  width: 100%;
  display: flex;
  justify-content: start;
}
.field-input{
  min-width: 300px;
  width: calc(100% - 40px);
}
.field-opt a{
  width: 40px;
  height: 40px;
  display: block;
  text-align: center;
  border-radius: 100%;
  line-height: 40px;
  margin-bottom: 15px;
  border: var(--el-input-border,var(--el-border-base));
}
@media only screen and (max-width:560px){
  .field-opt{
    width: 40px;
  }
}
</style>